<template><!--课程排行榜-->
    <div style="height: 100%;">
        <div class="header">
            <navbar :title="$t('rank_course_title')"></navbar>
        </div>
        <div class="content-noBottom fame">
            <div class="view-body">
                <div style="height: 100%" class="body-content" :class="{'height-100' : total === 0}">
                    <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                        <van-list
                        v-model="isLoading"
                        :finished="finished"
                        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                        loding-text="loading"
                        @load="getFreshDataList"
                        >
                            <div class="rank-tip">
                            <i class="tip-icon"></i>
                            <div>{{$t('course_rank_desc', {pageSize: pageSize})}}</div>
                            </div>
                            <div v-bind:class="{'height100' : total === 0}">
                                <div class="fame-item fame-header">
                                    <div class="rank_index">{{$t('rank_index')}}</div>
                                    <div class="rank-title">
                                        {{$t('course_name')}}
                                    </div>
                                    <div class="like_count">{{$t('like')}}</div>
                                </div>
                                <div class="fame-item" v-for="(item, $index) in freshCourseRankList" :key="$index" @click="courseRankDetails(item.itmId, item.itmType, item.itmTitle)">
                                    <div class="rank_index"><span :class="{ 'top':$index < 3}">{{$index + 1}}</span></div>
                                    <div class="rank-title">
                                        <div class="word-clamp-1 font-size15">{{item.name}}</div>
                                    </div>
                                    <div class="like_count">{{item.likeCount}}</div>
                                </div>
                                <!--暂无数据-->
                                <div v-if="!isLoading && total === 0" style="height:100%;">
                                    <div class="box-table" style="width:100%;height:100%;">
                                        <div class="box-table-cell" style="text-align: center;">
                                            <div class="no-data">
                                                <img src="../../../static/images/no-data.png" alt=""/>
                                                <p class="color999">{{ $t('no_data') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
                <common-loading :isLoading="isLoading"></common-loading>
            </div>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
import CommonLoading from '../common/loading';
export default {
    name: 'CourseLeaderboard',
    components: {
        CommonLoading
    },
    mixins: [mixin],
    data() {
        return {
            pageNo: 1,
            pageSize: 100,
            total: 0,
            //   courseRankList: [], //列表
            freshCourseRankList: [], //新接口 --课程列表
            maxPageNo: 0, // 优化下拉无限刷新请求问题
            type: 'score',
            sortname: 'courseScore',
            sortorder: 'desc',
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshDataList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        //课程排行排序
        selectSort(type) {
            this.freshCourseRankList = [];
            this.pageNo = 1;
            this.onFetching = false;
            //this.sortorder = (this.sortorder === 'desc' ? 'asc' : 'desc');
            switch (type) {
            case 'score':
                this.type = 'score';
                this.isLoading = true;
                this.sortname = 'courseScore'; //评分
                break;
            case 'new':
                this.type = 'new';
                this.isLoading = true;
                this.sortname = 'itmPublishTime'; //最新
                break;
            case 'learner':
                this.type = 'learner';
                this.isLoading = true;
                this.sortname = 'learner'; //学习人数
                break;
            };
            this.getFreshDataList('refresh');
        },
        courseRankDetails(id, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else if (type === 'CLASSROOM') {
                this.$router.push({path: `/certifiedCourse/${id}/0`});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        /*@不虎 请求新的选课列表-- 学习人数最多倒序*/
        getFreshDataList(option) {
            let tempParams = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            this.$axios({
                method: 'GET',
                url: `/app/fame/course`,
                params: tempParams
            }).then(res => {
                if (res && res.status === 200) {
                    if (option && option === 'refresh') {
                        this.freshCourseRankList = res.data.results;
                    } else {
                        this.freshCourseRankList = [...this.freshCourseRankList, ...res.data.results];
                    }
                    this.onFetching = false;
                }
                this.maxPageNo = res.data.totalPage;
                this.total = res.data.results.length || res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.freshCourseRankList.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    mounted() {
        if (this.$route.query.sortname) {
            if (this.$route.query.sortname === 'learner') {
                this.sortname = 'learner';
            } else {
                this.sortname = this.$route.query.sortname;
            }
        };
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        };
        this.getFreshDataList();
    }
};
</script>

<style scoped lang="less">
.body-content{
  padding: 15px;
}
.fame .rank-tip{
  padding: 0;
  padding-bottom: 10px;
}
</style>
